import { Form, Modal, Input, Avatar, Space, Upload } from "antd";
import { User } from "../../../Types/User";
import { UserOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import {
    createUser,
    updateUser,
    uploadSysUserAvatar,
} from "../../../api/sysUser";
import "./avatarUploader.css";
import { FormDialogProps } from "../../../Types/FormDialogProps";
import { UploadChangeParam, UploadFile } from "antd/es/upload";

export function UserEditFormDialog(props: FormDialogProps<User>) {
    const [form] = Form.useForm();
    function onOk() {
        if (props.detail && props.detail.id) {
            updateUser(props.detail.id, form.getFieldsValue()).then(() => {
                if (props.onOk) {
                    props.onOk();
                }
            });
        } else {
            createUser(form.getFieldsValue()).then(() => {
                if (props.onOk) {
                    props.onOk();
                }
            });
        }
    }

    const [tempAvatar, setTempAvatar] = useState<string | undefined>(undefined);

    function onUploadChange({ file }: UploadChangeParam<UploadFile>) {
        uploadSysUserAvatar(file).then((res) => {
            setTempAvatar(res.data);
            form.setFieldValue("avatar", res.data);
        });
    }
    useEffect(() => {
        form.resetFields();
        if (props.detail) {
            form.setFieldsValue(props.detail);
        } else {
            form.setFieldsValue({});
            setTempAvatar(undefined);
        }
    }, [form, props.detail, props.open]);

    return (
        <Modal
            open={props.open}
            title={props.title || "新建用户"}
            onCancel={props.onCancel}
            onOk={onOk}
        >
            <Form form={form}>
                <Form.Item name="avatar">
                    <Space
                        align="center"
                        style={{
                            width: "100%",
                            justifyContent: "center",
                        }}
                    >
                        <Upload
                            listType="picture-circle"
                            onChange={onUploadChange}
                            beforeUpload={() => {
                                return false;
                            }}
                            className="avatar-uploader_component"
                            showUploadList={false}
                        >
                            <Avatar
                                size={64}
                                icon={<UserOutlined />}
                                src={tempAvatar || props.detail?.avatar}
                            />
                        </Upload>
                    </Space>
                </Form.Item>

                <Form.Item label="用户名" name="name">
                    <Input type="text" />
                </Form.Item>

                {props.detail && props.detail.id == undefined && (
                    <Form.Item label="密码" name="password">
                        <Input type="password" />
                    </Form.Item>
                )}

                <Form.Item label="邮箱" name="email">
                    <Input type="email" />
                </Form.Item>

                <Form.Item label="手机号" name="phone">
                    <Input type="text" />
                </Form.Item>

                <Form.Item label="角色" name="role">
                    <Input type="text" />
                </Form.Item>
                <Form.Item label="状态" name="status">
                    <Input type="text" />
                </Form.Item>
            </Form>
        </Modal>
    );
}
